<html>
    <head>
        <title>操作样式</title>
        <script src="./js/jquery-3.6.0.min.js" type="text/javascript"></script>
            <style type="text/css">
                .baseClass{background-color: #DDD;}
                .focusClass{background-color: #FFF;border: 2px dotted #FF0000;}
                .inverseColor{color: #FFF;background-color: #000;}
            </style>
    </head>
    <body>
        <img src="images/coldplay.jpg"><hr>
        <input type="button" value="放大图片" onclick="enlargeImage()"/>
        <input type="button" value="缩小图片" onclick="lessenImage()"/>
        <script type="text/javascript">
            function enlargeImage(){
                //alert($("img").css("width"));
                $("img").css({
                    width: function(index, value){
                        return parseFloat(value) * 1.1;
                    },
                    height: function(index, value){
                        return parseFloat(value) * 1.1;
                    }
                });
            }
            function lessenImage(){
                $("img").css({
                    width: function(index, value) {
                        return parseFloat(value) * 0.9;
                    },
                    height: function(index, value) {
                        return parseFloat(value) * 0.9;
                    }
                });
            }
        </script>
    </body>
</html>